<template>
  <div class="alarm-realtime-infomation">
    <div class="title">警告实时信息</div>
    <div class="table-box" @scroll="handleScroll">
      <table class="table">
        <thead>
          <tr>
            <th>告警事件类型</th>
            <th>报警设备</th>
            <th>报警时间</th>
            <!-- <th>图片</th> -->
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in data" :key="index">
            <td>{{ item.eventType || '-' }}</td>
            <td>{{ item.deviceName || '-' }}</td>
            <td>{{ item.startTime || '-' }}</td>
            <!-- <td>
              <div class="img-box">
                <img src="../assets/logo.png" alt="">
              </div>
            </td> -->
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'alarm-realtime-infomation',
  props: {
    api: Function,
  },
  data() {
    return {
      loading: false,
      pageNum: 1,
      pageSize: 10,
      data: [],
      total: 100
    }
  },
  methods: {
    handleScroll(e) {
      if (this.loading) return
      const box = e.target, target = e.target.children[0]
      const boxHeight = box.clientHeight,
      targetHeight = target.clientHeight,
      scrollTop = box.scrollTop
      if (targetHeight - (scrollTop + boxHeight) < 10) {
        this.loading = true
        console.log('到底了')
        this.loadRes(false)
      }
    },
    loadRes(reset = true) {
      if (this.data.length === 100) return
      if (reset) {
        this.data = []
        this.pageNum = 1
      } else {
        this.pageNum += 1
      }
      this.api({
        pageNum:this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.loading = false
        const { rows } = res.data
        this.data.push(...rows)
      }).catch(() => {
        this.loading = false
      })
    }
  },
  mounted() {
    this.loadRes()
  }
}
</script>

<style lang="scss" scoped>
.alarm-realtime-infomation {
  overflow: hidden;
  .title {
    height: 0.22rem;
    line-height: 0.22rem;
    font-size: 0.18rem;
    color: #00DEFF;
    padding-left: 0.26rem;
    background: url('../assets/images/xbt.png') left center no-repeat;
    background-size: 0.22rem auto;
    margin-bottom: 0.16rem;
    font-weight: bold;
  }
  .table-box {
    max-height: 3.5rem;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  .table {
    width: 100%;
    border-collapse: collapse;
    color: #FFFFFF;
    text-align: center;
    thead {
      tr {
        background: rgba(32, 166, 255, 0.3);
        th {
          font-size: 0.14rem;
          height: 0.5rem;
          border-right: 1px solid rgba(0, 0, 36, 1);
        }
      }
    }
    tbody {
      tr {
        &:nth-child(even) {
          background: rgba(107, 140, 205, .2);

        }
        td {
          font-size: 0.12rem;
          height: 0.5rem;
          .img-box {
            width: 0.38rem;
            height: 0.38rem;
            overflow: hidden;
            margin: auto;
            img {
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }
  }
}
</style>